/// 断点设置
$breakpoints: (
  phone: (
    320px,
    480px,
  ),
  pad: (
    481px,
    768px,
  ),
  notebook: (
    769px,
    1024px,
  ),
  desktop: (
    1025px,
    1200px,
  ),
  tv: 1201px,
);

/// 根据断点设置媒体查询
@mixin respondTo($breakname) {
  $bp: map-get($breakpoints, $breakname);
  @if (type-of($bp) == "list") {
    $min: nth($bp, 1);
    $max: nth($bp, 2);
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}
